<template>
	<view class="pageBg">
		<form class="" @submit="submitForm">
			<view class="form">
				<view class="cu-form-group item">
					<view class="title">用户头像</view>
					<view class="cu-avatar round margin-left" @click="chooseImage">
						<image :src="userInfo.avatar" style="width: 100%; height: 100%" mode=""></image>
					</view>
				</view>
				<formItem title="账号" disabled name="account" v-model="userInfo.account"></formItem>
				<formItem title="昵称"  name="nickname" v-model="userInfo.nickname"></formItem>
				<formItem title="姓名" name="real_name" v-model="userInfo.real_name"></formItem>
				<formItem title="邮箱" name="email" v-model="userInfo.email"></formItem>
				<formItem title="手机" disabled name="mobile" v-model="userInfo.mobile"></formItem>
				<formItem title="微信" name="wechat" v-model="userInfo.wechat"></formItem>
				<view class="cu-form-group item" @click="navPreview">
					<view class="title">我的名片</view>
					<view class="box">
						<view class="inp" >去编辑</view>
						<!-- <text></text> -->
						<image class="cuIcon-right" src="/static/images/go.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="opt centerSubElements">
				<button form-type="submit" class="btn btnview">保存</button>
			</view>
		</form>
		<cut-component @callback="callback" ref="cut"></cut-component>
	</view>
</template>

<script>
import cutComponent from '@/components/my/cut-component/cut-component.vue';
import formItem from '@/components/my/formItem/formItem.vue';
export default {
	components: {
		cutComponent,
		formItem
	},
	data() {
		return {
			userInfo: {}
		};
	},
	onLoad() {
		// const userInfo = uni.getStorageSync('userInfoData');
		// this.userInfo = userInfo;
		this.init();
	},
	methods: {
		async navPreview() {
			uni.navigateTo({
				url:"/pages/my/card/card"
			})
		},
		async init() {
			const { data } = await this.$api.Usercenter();
			this.userInfo = data;
		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					this.$refs.cut.show({
						originSrc: res.tempFilePaths[0]
					});
				}
			});
		},
		async callback(e) {
			const res = await this.$api.UploadImage({
				filePath: e
			});
			this.userInfo.avatar = JSON.parse(res).data.uri;
		},
		preserve(e) {
			this.back();
		},
		async submitForm(e) {
			const res = await this.$api.UserSetInfo(this.userInfo);
			this.showToastMsg("修改成功")
			setTimeout(()=>{
				this.back()
			},500)
		}
		
	}
};
</script>
<style lang="scss" scoped>
.pageBg {
	.form {
		width: 100%;
		display: block;
		background-color: $content-bg-colcor;
		overflow: hidden;
		padding-top: 40rpx;
	}
	.cu-form-group {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-bottom: 1rpx solid #dddddd;
		.box {
			display: flex;
			align-items: center;
			.inp {
				height: 90rpx;
				margin: 0;
				padding: 0;
				width: 500rpx;
			}
			.cuIcon-right {
				width: 11.18rpx;
				height: 20rpx;
				margin-left: $margin-width;
			}
		}
	}
	.item {
		width: $connet-width;
		margin: 0 auto;
		line-height: 90rpx;

		.inp {
			text-align: right;
		}

		.cuIcon-right {
			color: $unselected;
		}

		.cu-avatar {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: $submargin-width;
		}
	}

	.changePassword {
		margin-top: $submargin-width;
		.item {
		}
	}

	.opt {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 146rpx;
		width: 100%;
		border-top: 1rpx solid #dddddd;

		.btn {
			width: 690rpx;
			height: 80rpx;
			font-size: $uni-font-size-15;
			line-height: 80rpx;
		}
	}
}
</style>